<template>
  <div class="app-container">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>供暖数据每日报表</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleExport"
        >
          导出报表
        </el-button>
      </div>

      <!-- 日期信息 -->
      <el-row :gutter="20" class="mb-20">
        <el-col :span="24">
          <div class="date-info">
            <h3>日期信息</h3>
            <p>报表日期：{{ reportDate }}</p>
            <p>发生责任日期：{{ dutyDate }}</p>
            <p>已供暖天数：{{ heatingDays }} 天</p>
            <p>法定已供暖天数：{{ legalHeatingDays }} 天</p>
          </div>
        </el-col>
      </el-row>

      <!-- 能耗数据 -->
      <el-row :gutter="20" class="mb-20">
        <el-col :span="24">
          <h3>能耗数据</h3>
          <el-tabs v-model="activeTab" type="card">
            <el-tab-pane label="气耗数据" name="gas">
              <el-table :data="gasData" border style="width: 100%">
                <el-table-column prop="level" label="层级" width="120"></el-table-column>
                <el-table-column prop="area" label="面积(㎡)" width="120"></el-table-column>
                <el-table-column prop="dailyConsumption" label="日气耗量(m³)" width="150"></el-table-column>
                <el-table-column prop="dailyIndex" label="日气耗指标值(m³/㎡)" width="180"></el-table-column>
                <el-table-column prop="dailyEvaluation" label="日气耗评价值" width="150"></el-table-column>
                <el-table-column prop="dailyEvaluationRatio" label="日气耗评价值环比" width="180">
                  <template slot-scope="scope">
                    <span :class="getRatioClass(scope.row.dailyEvaluationRatio)">
                      {{ formatRatio(scope.row.dailyEvaluationRatio) }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="totalConsumption" label="累计气耗量(m³)" width="150"></el-table-column>
                <el-table-column prop="totalIndex" label="累计气耗指标值(m³/㎡)" width="180"></el-table-column>
                <el-table-column prop="totalEvaluation" label="累计气耗评价值" width="150"></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="水耗数据" name="water">
              <el-table :data="waterData" border style="width: 100%">
                <el-table-column prop="level" label="层级" width="120"></el-table-column>
                <el-table-column prop="area" label="面积(㎡)" width="120"></el-table-column>
                <el-table-column prop="dailyConsumption" label="日水耗量(吨)" width="150"></el-table-column>
                <el-table-column prop="dailyIndex" label="日水耗指标值(吨/㎡)" width="180"></el-table-column>
                <el-table-column prop="dailyEvaluation" label="日水耗评价值" width="150"></el-table-column>
                <el-table-column prop="dailyEvaluationRatio" label="日水耗评价值环比" width="180">
                  <template slot-scope="scope">
                    <span :class="getRatioClass(scope.row.dailyEvaluationRatio)">
                      {{ formatRatio(scope.row.dailyEvaluationRatio) }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="totalConsumption" label="累计水耗量(吨)" width="150"></el-table-column>
                <el-table-column prop="totalIndex" label="累计水耗指标值(吨/㎡)" width="180"></el-table-column>
                <el-table-column prop="totalEvaluation" label="累计水耗评价值" width="150"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>

      <!-- 图表展示 -->
      <el-row :gutter="20" class="mb-20">
        <el-col :span="12">
          <div class="chart-container">
            <h3>气耗指标趋势</h3>
            <div ref="gasChart" style="width: 100%; height: 400px;"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-container">
            <h3>水耗指标趋势</h3>
            <div ref="waterChart" style="width: 100%; height: 400px;"></div>
          </div>
        </el-col>
      </el-row>

      <!-- 热费收缴数据 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <h3>热费收缴数据</h3>
          <el-table :data="feeData" border style="width: 100%">
            <el-table-column prop="level" label="层级" width="120"></el-table-column>
            <el-table-column prop="heatingArea" label="供热面积(㎡)" width="150"></el-table-column>
            <el-table-column prop="chargeArea" label="收费面积(㎡)" width="150"></el-table-column>
            <el-table-column label="居民收费">
              <el-table-column prop="resident.totalFee" label="应收(元)" width="150"></el-table-column>
              <el-table-column prop="resident.paidFee" label="实收(元)" width="150"></el-table-column>
              <el-table-column prop="resident.rate" label="收缴率(%)" width="150"></el-table-column>
            </el-table-column>
            <el-table-column label="非居民收费">
              <el-table-column prop="nonResident.totalFee" label="应收(元)" width="150"></el-table-column>
              <el-table-column prop="nonResident.paidFee" label="实收(元)" width="150"></el-table-column>
              <el-table-column prop="nonResident.rate" label="收缴率(%)" width="150"></el-table-column>
            </el-table-column>
            <el-table-column prop="totalRate" label="总收缴率(%)" width="150"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'HeatingDailyReport',
  data() {
    return {
      activeTab: 'gas',
      reportDate: '',
      dutyDate: '',
      heatingDays: 0,
      legalHeatingDays: 0,
      heatingStartDate: '2023-11-01', // 供热开始日期
      legalHeatingDate: '2023-11-15', // 法定供热开始日期
      gasData: [],
      waterData: [],
      feeData: [],
      gasChart: null,
      waterChart: null,
      chartData: {
        dates: [],
        gasDailyIndex: [],
        gasDailyEvaluation: [],
        gasTotalIndex: [],
        gasTotalEvaluation: [],
        waterDailyIndex: [],
        waterDailyEvaluation: [],
        waterTotalIndex: [],
        waterTotalEvaluation: []
      }
    }
  },
  mounted() {
    this.initData()
    this.initCharts()
  },
  beforeDestroy() {
    if (this.gasChart) {
      this.gasChart.dispose()
    }
    if (this.waterChart) {
      this.waterChart.dispose()
    }
  },
  methods: {
    // 初始化数据
    initData() {
      // 设置日期信息
      const today = new Date()
      const yesterday = new Date(today)
      yesterday.setDate(today.getDate() - 1)
      
      this.reportDate = this.formatDate(today)
      this.dutyDate = this.formatDate(yesterday)
      this.heatingDays = this.calculateDaysBetween(new Date(this.heatingStartDate), today)
      this.legalHeatingDays = this.calculateDaysBetween(new Date(this.legalHeatingDate), today)
      
      // 模拟气耗数据
      this.gasData = [
        {
          level: '集团',
          area: '1250000',
          dailyConsumption: '8560',
          dailyIndex: '0.0068',
          dailyEvaluation: '0.8228',
          dailyEvaluationRatio: 0.05,
          totalConsumption: '215600',
          totalIndex: '0.1725',
          totalEvaluation: '20.8725'
        },
        {
          level: '公司A',
          area: '650000',
          dailyConsumption: '4520',
          dailyIndex: '0.0070',
          dailyEvaluation: '0.8470',
          dailyEvaluationRatio: 0.03,
          totalConsumption: '112800',
          totalIndex: '0.1735',
          totalEvaluation: '20.9935'
        },
        {
          level: '项目1',
          area: '120000',
          dailyConsumption: '850',
          dailyIndex: '0.0071',
          dailyEvaluation: '0.8591',
          dailyEvaluationRatio: -0.02,
          totalConsumption: '20800',
          totalIndex: '0.1733',
          totalEvaluation: '20.9693'
        }
      ]
      
      // 模拟水耗数据
      this.waterData = [
        {
          level: '集团',
          area: '1250000',
          dailyConsumption: '320',
          dailyIndex: '0.00026',
          dailyEvaluation: '0.03146',
          dailyEvaluationRatio: 0.08,
          totalConsumption: '8560',
          totalIndex: '0.00685',
          totalEvaluation: '0.82885'
        },
        {
          level: '公司A',
          area: '650000',
          dailyConsumption: '168',
          dailyIndex: '0.00026',
          dailyEvaluation: '0.03146',
          dailyEvaluationRatio: 0.06,
          totalConsumption: '4450',
          totalIndex: '0.00685',
          totalEvaluation: '0.82885'
        },
        {
          level: '项目1',
          area: '120000',
          dailyConsumption: '32',
          dailyIndex: '0.00027',
          dailyEvaluation: '0.03267',
          dailyEvaluationRatio: -0.01,
          totalConsumption: '820',
          totalIndex: '0.00683',
          totalEvaluation: '0.82643'
        }
      ]
      
      // 模拟热费收缴数据
      this.feeData = [
        {
          level: '集团',
          heatingArea: '1250000',
          chargeArea: '1180000',
          resident: {
            totalFee: '35680000',
            paidFee: '31250000',
            rate: '87.59'
          },
          nonResident: {
            totalFee: '12450000',
            paidFee: '10230000',
            rate: '82.17'
          },
          totalRate: '85.72'
        },
        {
          level: '公司A',
          heatingArea: '650000',
          chargeArea: '620000',
          resident: {
            totalFee: '18500000',
            paidFee: '16320000',
            rate: '88.22'
          },
          nonResident: {
            totalFee: '6500000',
            paidFee: '5400000',
            rate: '83.08'
          },
          totalRate: '86.78'
        },
        {
          level: '项目1',
          heatingArea: '120000',
          chargeArea: '115000',
          resident: {
            totalFee: '3400000',
            paidFee: '3020000',
            rate: '88.82'
          },
          nonResident: {
            totalFee: '1200000',
            paidFee: '1020000',
            rate: '85.00'
          },
          totalRate: '87.73'
        }
      ]
      
      // 模拟图表数据 - 最近7天的数据
      const dates = []
      const gasDailyIndex = []
      const gasDailyEvaluation = []
      const gasTotalIndex = []
      const gasTotalEvaluation = []
      const waterDailyIndex = []
      const waterDailyEvaluation = []
      const waterTotalIndex = []
      const waterTotalEvaluation = []
      
      for (let i = 6; i >= 0; i--) {
        const date = new Date()
        date.setDate(date.getDate() - i)
        dates.push(this.formatDate(date, 'MM-DD'))
        
        // 随机生成一些波动数据
        const baseGasIndex = 0.0065 + Math.random() * 0.001
        const baseWaterIndex = 0.00025 + Math.random() * 0.00005
        
        gasDailyIndex.push(baseGasIndex.toFixed(4))
        gasDailyEvaluation.push((baseGasIndex * 121).toFixed(4))
        gasTotalIndex.push((0.17 + i * 0.0005).toFixed(4))
        gasTotalEvaluation.push((20.8 + i * 0.05).toFixed(2))
        
        waterDailyIndex.push(baseWaterIndex.toFixed(5))
        waterDailyEvaluation.push((baseWaterIndex * 121).toFixed(5))
        waterTotalIndex.push((0.0068 + i * 0.00001).toFixed(5))
        waterTotalEvaluation.push((0.82 + i * 0.002).toFixed(5))
      }
      
      this.chartData = {
        dates,
        gasDailyIndex,
        gasDailyEvaluation,
        gasTotalIndex,
        gasTotalEvaluation,
        waterDailyIndex,
        waterDailyEvaluation,
        waterTotalIndex,
        waterTotalEvaluation
      }
    },
    
    // 初始化图表
    initCharts() {
      this.gasChart = echarts.init(this.$refs.gasChart)
      this.waterChart = echarts.init(this.$refs.waterChart)
      
      // 渲染图表
      this.renderCharts()
      
      // 窗口大小变化时重新调整图表大小
      window.addEventListener('resize', this.resizeCharts)
    },
    
    // 调整图表大小
    resizeCharts() {
      if (this.gasChart) {
        this.gasChart.resize()
      }
      if (this.waterChart) {
        this.waterChart.resize()
      }
    },
    
    // 渲染图表
    renderCharts() {
      // 气耗图表配置
      const gasOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['日气耗指标值', '日气耗评价值', '累计气耗指标值', '累计气耗评价值']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '日气耗指标值',
            type: 'line',
            data: this.chartData.gasDailyIndex,
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#5470C6'
            },
            itemStyle: {
              color: '#5470C6'
            }
          },
          {
            name: '日气耗评价值',
            type: 'line',
            data: this.chartData.gasDailyEvaluation,
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#91CC75'
            },
            itemStyle: {
              color: '#91CC75'
            }
          },
          {
            name: '累计气耗指标值',
            type: 'line',
            data: this.chartData.gasTotalIndex,
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#EE6666'
            },
            itemStyle: {
              color: '#EE6666'
            }
          },
          {
            name: '累计气耗评价值',
            type: 'line',
            data: this.chartData.gasTotalEvaluation,
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#FAC858'
            },
            itemStyle: {
              color: '#FAC858'
            }
          }
        ]
      }
      
      // 水耗图表配置
      const waterOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['日水耗指标值', '日水耗评价值', '累计水耗指标值', '累计水耗评价值']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '日水耗指标值',
            type: 'line',
            data: this.chartData.waterDailyIndex,
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#5470C6'
            },
            itemStyle: {
              color: '#5470C6'
            }
          },
          {
            name: '日水耗评价值',
            type: 'line',
            data: this.chartData.waterDailyEvaluation,
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#91CC75'
            },
            itemStyle: {
              color: '#91CC75'
            }
          },
          {
            name: '累计水耗指标值',
            type: 'line',
            data: this.chartData.waterTotalIndex,
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#EE6666'
            },
            itemStyle: {
              color: '#EE6666'
            }
          },
          {
            name: '累计水耗评价值',
            type: 'line',
            data: this.chartData.waterTotalEvaluation,
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#FAC858'
            },
            itemStyle: {
              color: '#FAC858'
            }
          }
        ]
      }
      
      this.gasChart.setOption(gasOption)
      this.waterChart.setOption(waterOption)
    },
    
    // 计算两个日期之间的天数
    calculateDaysBetween(startDate, endDate) {
      const oneDay = 24 * 60 * 60 * 1000 // 一天的毫秒数
      return Math.round(Math.abs((endDate - startDate) / oneDay)) + 1
    },
    
    // 格式化日期
    formatDate(date, format = 'YYYY-MM-DD') {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      
      if (format === 'MM-DD') {
        return `${month}-${day}`
      }
      return `${year}-${month}-${day}`
    },
    
    // 格式化环比数据
    formatRatio(ratio) {
      if (ratio === null || ratio === undefined) return '-'
      return `${(ratio * 100).toFixed(2)}%`
    },
    
    // 获取环比样式
    getRatioClass(ratio) {
      if (ratio > 0) return 'positive-ratio'
      if (ratio < 0) return 'negative-ratio'
      return ''
    },
    
    // 导出报表
    handleExport() {
      this.$message({
        message: '导出报表功能已模拟触发',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
.date-info {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}
.chart-container {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.positive-ratio {
  color: #f56c6c;
}
.negative-ratio {
  color: #67c23a;
}
</style>